<div class="container-fluid">

  <div class="row">
    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="my-validate-form">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>头像</span></label>
        <div class="col-sm-10 file-upload">
          <div class="row">
            <div class="col-sm-2">
              <div class="image">
                <img class="middle" [src]="model.avatar | imgPath">
              </div>
            </div>
            <div class="col-sm-10">
              <div ng2FileDrop
                   [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                   (fileOver)="fileOver($event)"
                   [uploader]="uploader"
                   class="well my-drop-zone">
                拖动到此处上传
              </div>

              <div class="upload-row">
                <div class="upload-input-wrapper">
                        <span class="upload-input-container">
                            <input id="upload-input" name="upload" type="file" ng2FileSelect [uploader]="uploader"
                                   [accept]="allowedMimeType.toString()" />
                        </span>
                        <span class="upload-button-container">
                            <button (click)='selectFile()' type="button" class="btn btn-secondary">选择头像...</button>
                        </span>
                </div>

                <div class="progress-wrapper" *ngIf="uploader.queue.length">
                  <div class="progress-bar" role="progressbar"
                       [ngStyle]="{ 'width': uploader.queue[0].progress + '%' }"></div>
                </div>
                <div class="upload-file-name" *ngIf="!uploader.isUploading && uploadedFile">
                  {{uploadedFile.origName}} 上传成功
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>姓名</span></label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="name" formControlName="name"
                 [(ngModel)]="model.name" #name>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>邮箱</span></label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="email" formControlName="email"
                 [(ngModel)]="model.email" #email>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>电话</span></label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="phone" formControlName="phone"
                 [(ngModel)]="model.phone" #phone>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
          <button type="submit" class="btn btn-primary" [disabled]="!form.valid">保存</button>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
          <div class="validate-errors">
            <div class="validate-error" *ngFor="let msg of formErrors">
              <div>{{ msg }}</div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
